﻿@page "/tables"

<h3>Table 表格</h3>

<h4>用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。</h4>

<Block Title="基础表格" Introduction="基础的表格展示用法。" CodeFile="table.1.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(3)">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带斑马纹表格" Introduction="使用带斑马纹的表格，可以更容易区分出不同行的数据。设置 <code>IsStriped=true</code> 即可" CodeFile="table.2.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(3)" IsStriped="true">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带边框表格" Introduction="通过设置 <code>IsBordered</code> 属性，增加表格表框效果" CodeFile="table.3.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(3)" IsBordered="true">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带选择列表格" Introduction="通过设置 <code>ShowCheckbox=true</code> 增加表格第一列为选择列" CodeFile="table.4.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(3)" ShowCheckbox="true">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带显示文字的选择列表格" Introduction="通过设置 <code>ShowCheckboxText=true</code> 表格第一列显示文字为选择" CodeFile="table.5.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(3)" ShowCheckbox="true" ShowCheckboxText="true">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="选择框列" Introduction="<code>RowTemplate</code> 内部组件 <code>TableCell</code> 设置 <code>Checkbox</code> 并设置相关数据绑定即可，本示例中通过数据绑定将选择框组件与值进行绑定" CodeFile="table.6.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(3)">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="bool" @bind-Field="@context.Complete" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell><Checkbox @bind-Value="@context.Complete" IsDisabled="true"></Checkbox></TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="分页表格" Introduction="设置 <code>IsPagination</code> 显示分页组件" CodeFile="table.7.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource" OnQuery="@OnQuery">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带 Toolbar 的表格" Introduction="设置 <code>ShowToolbar</code> 显示工具条组件" CodeFile="table.8.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(4)"
           IsBordered="true"
           ShowCheckbox="true" ShowToolbar="true" ShowDefaultButtons="false">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带查询的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件" CodeFile="table.9.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem"
           IsBordered="true" IsPagination="true" PageItemsSource="@PageItemsSource"
           ShowToolbar="true" ShowSearch="true" ShowAdvancedSearch="false" ShowDefaultButtons="false"
           OnQuery="@OnQuery">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="固定表头的表格" Introduction="设置 <code>Height=200</code> 固定表头" CodeFile="table.11.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" Items="@Items.Take(10)" Height="200" IsBordered="true">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="带分页数据固定表头的表格" Introduction="设置 <code>Height=200</code> 固定表头，由于默认每页仅显示 <code>2</code> 行数据所以高度采用自适应方式，当每页显示数据为 <code>4</code> 行时高度超出设置值 <code>200</code> 后，Table 组件出现纵向滚动条" CodeFile="table.12.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem" IsBordered="true"
           PageItemsSource="@PageItemsSource" IsPagination="true" OnQuery="@OnQuery" Height="200">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" />
            <TableColumn TItem="string" @bind-Field="@context.Name" />
            <TableColumn TItem="string" @bind-Field="@context.Address" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
    </Table>
</Block>

<Block Title="具有单表维护功能的表格" Introduction="设置 <code>ShowSearch</code> 显示查询组件件" CodeFile="table.10.txt">
    <Table TItem="BootstrapBlazor.WebConsole.Pages.BindItem"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true"
           ShowToolbar="true" ShowSearch="true" ShowCheckbox="true" ShowExtendButtons="true"
           AddModalTitle="增加测试数据窗口" EditModalTitle="编辑测试数据窗口"
           SearchModel="@SearchModel"
           OnQuery="@OnQuery" OnResetSearch="@OnResetSearch"
           OnAdd="@OnAdd" OnSave="@OnSave" OnDelete="@OnDelete">
        <HeaderTemplate>
            <TableColumn TItem="DateTime" @bind-Field="@context.DateTime" Sort="true" />
            <TableColumn TItem="string" @bind-Field="@context.Name" Sort="true" />
            <TableColumn TItem="string" @bind-Field="@context.Address" Sort="true" />
        </HeaderTemplate>
        <RowTemplate>
            <TableCell>@context.DateTime</TableCell>
            <TableCell>@context.Name</TableCell>
            <TableCell>@context.Address</TableCell>
        </RowTemplate>
        <EditTemplate>
            <div class="form-inline">
                <div class="row">
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50">
                            <RequiredValidator />
                            <StringLengthValidator Length="50" />
                        </BootstrapInput>
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空，50字以内" maxlength="50">
                            <RequiredValidator />
                            <StringLengthValidator Length="50" />
                        </BootstrapInput>
                    </div>
                </div>
            </div>
        </EditTemplate>
        <SearchTemplate>
            <div class="form-inline">
                <div class="row">
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Name" placeholder="不可为空，50字以内" maxlength="50" />
                    </div>
                    <div class="form-group col-12 col-sm-6">
                        <BootstrapInput @bind-Value="@context.Address" placeholder="不可为空，50字以内" maxlength="50" />
                    </div>
                </div>
            </div>
        </SearchTemplate>
    </Table>
</Block>

<Toast></Toast>

<PopoverConfirm></PopoverConfirm>

<AttributeTable Items="GetAttributes()"></AttributeTable>
